<template>
    <div>
        <!-- 顶部tab -->
        <header_></header_>
        <!-- 顶部标题 -->
        <div class="bgf5 clearfix">
            <div class="top-user">
                <div class="inner">
                    <router-link class="logo" to="/"><img src="@/assets/images/icons/logo.jpg" alt="TP6" class="cover">
                    </router-link>
                    <div class="title">购物车</div>
                </div>
            </div>
        </div>
        <div class="content clearfix bgf5">
            <section class="user-center inner clearfix">
                <div class="user-content__box clearfix bgf">
                    <div class="title">购物车</div>
                    <div class="shopcart-form__box">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th width="150">
                                    <label class="checked-label">
                                        <Checkbox
                                                :value="checkAll"
                                                @click.prevent.native="handleCheckAll">全选
                                        </Checkbox>
                                    </label>
                                </th>
                                <th width="300">商品信息</th>
                                <th width="150">单价</th>
                                <th width="200">数量</th>
                                <th width="200">总价</th>
                                <th width="80">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(v,k) in list">
                                <!--<Checkbox v-for="(item,index) in list" v-model="item.isCheck" label="香蕉"></Checkbox>-->
                                <th scope="row">
                                    <label class="checked-label">
                                        <Checkbox :value="v.isCheck" @click.prevent.native="chooseCheck(k)"></Checkbox>
                                        <i></i>
                                        <div class="img"><img :src="v.img" alt="" class="cover">
                                        </div>
                                    </label>
                                </th>
                                <td>
                                    <div class="name ep3" v-text="v.name"></div>
                                    <div class="type c9">颜色分类：<span v-text="v.name"></span> 尺码：<span
                                            v-text="v.type2"></span></div>
                                </td>
                                <td>¥<span v-text="v.price"></span></td>
                                <td>
                                    <div class="cart-num__box">
                                        <input type="button" class="sub" value="-" @click="changeNum(k,1)">
                                        <input type="text" class="val" :value="v.num" disabled="true" maxlength="2">
                                        <input type="button" class="add" value="+" @click="changeNum(k,2)">
                                    </div>
                                </td>
                                <td>¥<span v-text="v.price*v.num"></span></td>
                                <td><a @click="del(k)">删除</a></td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="user-form-group tags-box shopcart-submit pull-right">
                            <button type="submit" class="btn" @click="order">提交订单</button>
                        </div>
                        <div class="checkbox shopcart-total">
                            <div class="pull-right">
                                已选商品 <span v-text="totalCount"></span> 件
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合计（不含运费）
                                <b class="cr">¥<span class="fz24" v-text="totalPrice"></span></b>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <footer_></footer_>
    </div>
</template>

<script>
    import header_ from '../components/header_'
    import footer_ from '../components/footer_'

    export default {
        components: {header_, footer_},
        name: "cart",
        data() {
            return {
                checkAll: false,
                list: [
                    {
                        "img": "https://img13.360buyimg.com/babel/s1180x940_jfs/t1/92005/33/1475/95815/5dbff7feEa53540d9/487bf5b57271f988.jpg.webp",
                        "name": "商品一",
                        "type1": "分类一",
                        "type2": "分类二",
                        "price": "1",
                        "num": 1,
                        "isCheck": false,
                    },
                    {
                        "img": "https://img10.360buyimg.com/pop/s1180x940_jfs/t1/56836/4/14213/78090/5db29b29E839ace4d/ff51074905618cb5.jpg.webp",
                        "name": "商品二",
                        "type1": "分类三",
                        "type2": "分类四",
                        "price": "2",
                        "num": 2,
                        "isCheck": false,
                    }
                ],
                totalPrice: 0.00,
                totalCount: 0
            }
        },
        mounted() {
            $('.to-top').toTop({position: false});
            // 个数限制输入数字
            $('input.val').onlyReg({reg: /[^0-9.]/g});
            this.getTotalSum()
        },
        methods: {
            order(){
              this.$router.push("/order");
            },
            handleCheckAll() {
                if (this.checkAll) {
                    this.checkAll = false;
                    for (var i = 0; i < this.list.length; i++) {
                        this.list[i].isCheck = false
                    }
                } else {
                    this.checkAll = true;
                    for (var i = 0; i < this.list.length; i++) {
                        this.list[i].isCheck = true
                    }
                }
                this.getTotalSum();
                this.getTotalCount();
            },
            chooseCheck(index) {
                if (this.list[index].isCheck == false) {
                    this.list[index].isCheck = true;
                } else {
                    this.list[index].isCheck = false;
                }
                this.getTotalSum();
                this.getTotalCount();
                this.checkIsAll();
            },
            checkIsAll() {
                var checkAll = true;
                for (var i = 0; i < this.list.length; i++) {
                    if (this.list[i].isCheck == false) {
                        checkAll = false;
                        break;
                    }
                }
                this.checkAll = checkAll;
            },
            del(k) {
                this.list.splice(k, 1);
                this.getTotalSum();
                this.getTotalCount();
            },
            changeNum(index, t) {
                if (t == 1) { //+
                    if (this.list[index].num == 1) {
                        return;
                    }
                    this.list[index].num = this.list[index].num - 1;
                } else { // -
                    this.list[index].num = this.list[index].num + 1;
                }
                this.getTotalSum();
                this.getTotalCount();
            },
            getTotalSum() {
                this.totalPrice = 0.00;
                for (var i = 0; i < this.list.length; i++) {
                    if (this.list[i].isCheck == true) {
                        this.totalPrice += parseFloat(this.list[i].price * this.list[i].num);
                    }
                }
                console.log(this.totalPrice);
            },
            getTotalCount() {
                this.totalCount = 0;
                for (var i = 0; i < this.list.length; i++) {
                    if (this.list[i].isCheck == true) {
                        this.totalCount += parseFloat(this.list[i].num);
                    }
                }
                console.log(this.totalCount);
            }
        }
    }
</script>

<style scoped>

</style>
